<template>
  <div class="home">
    <!--1.  顶部区域布局---------- -->
    <div class="header">
      <div class="item">
        总销售额
        <div class="num">{{ totalData.saleTotal | num }}</div>
        <div class="bottom">今日销售额：{{ totalData.sale | num }}</div>
      </div>
      <div class="item">
        总访问量
        <div class="num">{{ totalData.viewsTotal | num }}</div>
        <div class="bottom">今日访问量：{{ totalData.views | num }}</div>
      </div>
      <div class="item">
        总收藏量
        <div class="num">{{ totalData.collectTotal | num }}</div>
        <div class="bottom">今日收藏量：{{ totalData.collect | num }}</div>
      </div>
      <div class="item">
        总支付量
        <div class="num">{{ totalData.payTotal }}</div>
        <div class="bottom">今日支付量：{{ totalData.pay | num }}</div>
      </div>
    </div>

    <!--2. 访问数据统计 ----------------->
    <div class="content">
      <div class="time-info" id="box13">
        <div class="title">月销售额</div>
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="charts" style="width: 100%; height: 300px"></div>
      </div>
      <div class="area title" id="box1">
        <div class="title">商品销售比例分配</div>
        <div id="pie" style="width: 100%; height: 300px"></div>
      </div>
    </div>

    <!-- 3.  -->
    <!-- 最新内容 -->
    <div class="home-footer">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>今日订单</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8">
              <p>今日订单数</p>
              <div>{{ orderData.curOrderCount | num }}</div>
            </el-col>
            <el-col :span="8">
              <p>汇总确认订单</p>
              <div>{{ orderData.curCollect | num }}</div>
            </el-col>
            <el-col :span="8">
              <p>累计订单</p>
              <div>{{ orderData.curMoney | num }}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>本月订单</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8">
              <p>本月订单数</p>
              <div>{{ orderData.orderCount | num }}</div>
            </el-col>
            <el-col :span="8">
              <p>汇总确认订单</p>
              <div>{{ orderData.collect | num }}</div>
            </el-col>
            <el-col :span="8">
              <p>累计金额</p>
              <div>{{ orderData.money | num }}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>快捷入口</span>
        </div>
        <div class="text item">
          <el-button type="primary">商品管理</el-button>
          <el-button>订单管理</el-button>
          <el-button>系统管理</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getTotalInfo, getOrderInfo, getLineBarInfo, getPieInfo } from "@/api/home";

// 引入echarts
import * as echarts from "echarts";

export default {
  components: {},
  created() {
    this.totalInfo();
    this.orderInfo();
  },
  mounted() {
    // 最早可以获取到dom的生命周期
    this.lineBarInfo();
    this.pieInfo();
  },
  filters: {
    num(value) {
      // 212313 --212,313
      if (!value) return;
      return value.toLocaleString();
    },
  },
  data() {
    return {
      totalData: {},
      orderData: {},
    };
  },
  methods: {
    totalInfo() {
      try {
        getTotalInfo()
          .then((res) => {
            if (res.success) {
              this.totalData = res.data;
            } else {
              this.$message(res.errorMsg);
            }
          })
          .catch((error) => {
            this.$message(error);
          });
      } catch (error) {
        this.$message(error);
      }
    },
    orderInfo() {
      getOrderInfo()
        .then((res) => {
          if (res.success) {
            this.orderData = res.data;
          } else {
            this.$message(res.errorMsg);
          }
        })
        .catch((error) => {
          this.$message(error);
        });
    },

    lineBarInfo() {
      getLineBarInfo()
        .then((res) => {
          if (res.success) {
            // 基于准备好的dom，初始化echarts实例
            const { categoryList, saleAmountList, saleCountList } = res.data;
            let myChart = echarts.init(document.getElementById("charts"));
            // 绘制图表
            myChart.setOption({
              // title: {
              // 	text: '月销售额'
              // },
              tooltip: {
                trigger: "axis",
              },
              xAxis: {
                //   data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
                data: categoryList,
              },
              yAxis: {}, // y轴会自动创建数据
              series: [
                {
                  name: "销售额",
                  type: "line", //bar :柱状图,line :折线图,pie :饼图,map :地图
                  // data: [5, 20, 16, 100, 10, 1],
                  data: saleAmountList,
                  smooth: true,
                },
                {
                  name: "销量",
                  type: "bar", //bar :柱状图,line :折线图,pie :饼图,map :地图
                  // data: [15, 5, 22, 18, 8, 29],
                  data: saleCountList,
                },
                //   {
                //     name: "销量2",
                //     type: "line", //bar :柱状图,line :折线图,pie :饼图,map :地图
                // data: [15, 5, 22, 18, 8, 29],
                //     smooth: true,
                //   },
              ],
            });
          } else {
            this.$message(res.errorMsg);
          }
        })
        .catch((error) => {
          this.$message(error);
        });
    },

    pieInfo() {
      let chartDom = document.getElementById("pie");
      getPieInfo()
        .then((res) => {
          if (res.success) {
            const pieInfoData = res.data;
            var myChart = echarts.init(chartDom);
            var option;

            option = {
              // title: {
              //   text: "Referer of a Website",
              //   subtext: "Fake Data",
              //   left: "center",
              // },
              tooltip: {
                trigger: "item",
              },
              legend: {
                //   orient: "vertical",
                //   left: "left",
              },
              series: [
                {
                  // name: "Access From",
                  type: "pie",
                  radius: "50%",
                  // data: [
                  //   { value: 1048, name: "Search Engine" },
                  //   { value: 735, name: "Direct" },
                  //   { value: 580, name: "Email" },
                  // ],
                  data: pieInfoData,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                  },
                },
              ],
            };

            option && myChart.setOption(option);
          } else {
            this.$message(res.errorMsg);
          }
        })
        .catch((error) => {
          this.$message(error);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;

  .item {
    flex: 1;
    height: 100px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    // margin-left: 20px;
    margin-right: 30px;
    font-weight: bold;
    color: #fff;
    // text-align: center;
    position: relative;

    .num {
      font-size: 22px;
      margin: 10px;
      color: #fff;
    }

    .bottom {
      position: absolute;
      border-top: 1px solid rgb(246, 245, 245);
      padding: 10px 20px;
      bottom: 0;
      right: 0;
      left: 0;
      color: #fff;
      font-weight: normal;
    }
  }

  .item:nth-child(1) {
    background-image: linear-gradient(#df887d, #88554d);
  }

  .item:nth-child(2) {
    background-image: linear-gradient(#409eff, #2e556e);
  }

  .item:nth-child(3) {
    background-image: linear-gradient(#b54fa8, #713c7a);
  }

  .item:nth-child(4) {
    background-image: linear-gradient(#1cd2f1, #39717a);
    margin-right: 0px;
  }
}

// 图表

.content {
  margin: 20px 20px 20px 0px;
  display: flex;
  height: 320px;
  padding-left: 0 !important;

  p {
    font-size: 14px;
    padding-bottom: 8px;
  }

  .title {
    font-weight: 600;
  }

  .time-info {
    flex: 2;
    margin-right: 20px;
    padding: 10px;
    background-color: #fff;
  }

  .area {
    flex: 1;
    padding: 10px;
    background-color: #fff;
    // margin-right: 20px;
  }
}

//内容

.home-footer {
  display: flex;
  // padding-left: 20px;
  margin-bottom: 20px;

  .box-card {
    flex: 1;
    margin-right: 30px;

    span {
      font-weight: 600;
    }
  }

  .item {
    text-align: center;
    font-size: 24px;
    color: #333;

    .el-col {
      border-right: 1px solid #eee;
    }

    .el-col:last-child {
      border-right: none;
    }

    .title {
      margin-bottom: 10px;
      font-size: 14px;
    }
  }
}
</style>